Google Charts API তে GeoChart একটি শক্তিশালী টুল যা ডেটা ভিজুয়ালাইজেশনের জন্য গ্লোবাল ম্যাপ বা দেশের ম্যাপ ব্যবহার করে। এটি ব্যবহারকারীদের জন্য বিভিন্ন অঞ্চলের ডেটা বা পরিসংখ্যান দেখানোর জন্য একটি অত্যন্ত কার্যকরী উপায়। আপনি GeoChart ব্যবহার করে একটি দেশ বা অঞ্চলের মানচিত্রে ডেটা রঙ দিয়ে প্রদর্শন করতে পারেন, যেমন: দেশের জনসংখ্যা, আয়, বা অন্য কোনো সূচক।

এখানে, আমরা GeoChart তৈরি করার প্রক্রিয়া দেখব এবং দেখাবো কিভাবে এটি Angular অ্যাপ্লিকেশনে ব্যবহার করতে হয়।

Step 1: Angular প্রজেক্ট তৈরি করা

প্রথমে একটি নতুন Angular প্রজেক্ট তৈরি করুন (যদি ইতিমধ্যে একটি প্রজেক্ট থাকে, তবে সেটি ব্যবহার করতে পারেন):

ng new geo-chart-app
cd geo-chart-app

Step 2: Angular-এ Google Charts ইন্সটল করা

এখন, Google Charts ব্যবহার করতে angular-google-charts প্যাকেজটি ইন্সটল করতে হবে:

npm install angular-google-charts

এটি ইনস্টল হওয়ার পর angular-google-charts লাইব্রেরি আপনার node_modules ফোল্ডারে যুক্ত হয়ে যাবে।

Step 3: GoogleChartsModule ইমপোর্ট করা

এখন, app.module.ts ফাইলে GoogleChartsModule ইমপোর্ট করতে হবে:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts'; // GoogleChartsModule ইমপোর্ট

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule // এখানে GoogleChartsModule যোগ করুন
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: GeoChart তৈরি করা

এখন, আমরা GeoChart তৈরি করব, যাতে দেশের মানচিত্রে বিভিন্ন ডেটা প্রদর্শিত হবে।

app.component.ts ফাইল:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'GeoChart - Map Visualization';

  chartType = 'GeoChart'; // Chart Type (GeoChart)
  
  chartData = [
    ['Country', 'Population'],
    ['USA', 331883986],
    ['India', 1380004385],
    ['China', 1444216107],
    ['Brazil', 213993437],
    ['Russia', 145912025]
  ]; // Chart Data (Country and Population)

  chartOptions = {
    colorAxis: { colors: ['#e6f7ff', '#3399ff'] }, // Color axis range
    backgroundColor: '#f5f5f5', // Background color for map
    datalessRegionColor: '#ffffff', // Color for regions with no data
    defaultColor: '#f5f5f5' // Default color for regions with no data
  }; // Chart Options
}

এখানে, chartData হচ্ছে একটি অ্যারে যার মধ্যে দেশের নাম এবং তাদের জনসংখ্যা উল্লেখ করা আছে। colorAxis এবং backgroundColor দিয়ে আমরা মানচিত্রের রঙ কাস্টমাইজ করেছি।

app.component.html ফাইল:

<h1>{{ title }}</h1>

<!-- Google GeoChart কম্পোনেন্ট -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

এখানে, google-chart কম্পোনেন্টে [data]="chartData" এবং [options]="chartOptions" ব্যবহার করে আমরা ডেটা এবং কাস্টম অপশন বাইন্ড করেছি।

Step 5: অ্যাপ্লিকেশন চালানো

এখন, অ্যাপ্লিকেশনটি চালাতে নিচের কমান্ডটি ব্যবহার করুন:

ng serve

এটি ডিফল্টভাবে অ্যাপ্লিকেশনটি http://localhost:4200 এ রান করবে। ব্রাউজারে গিয়ে আপনি GeoChart দেখতে পারবেন, যেখানে বিভিন্ন দেশের জনসংখ্যা ভিজুয়ালাইজ করা হবে।

GeoChart কাস্টমাইজেশন

Google Charts API তে GeoChart কাস্টমাইজ করার জন্য বেশ কিছু অপশন রয়েছে:

1. Region Specific Colors

আপনি নির্দিষ্ট দেশ বা অঞ্চলের জন্য আলাদা রঙ নির্ধারণ করতে পারেন। উদাহরণস্বরূপ:

chartOptions = {
  region: 'IN', // India region highlight
  colorAxis: { colors: ['#e6f7ff', '#ff3399'] } // Color range for India
};

2. Custom Regions (Custom Data)

আপনি GeoChart-এ কাস্টম ডেটা ব্যবহার করে নির্দিষ্ট অঞ্চল বা দেশের মানচিত্র কাস্টমাইজ করতে পারেন।

chartData = [
  ['Country', 'Population', 'GDP'],
  ['USA', 331883986, 21.43],
  ['India', 1380004385, 2.87],
  ['China', 1444216107, 14.34]
];

এখানে, আমরা দেশগুলোর জনসংখ্যার পাশাপাশি তাদের GDP (Gross Domestic Product) তথ্যও যোগ করেছি।

3. Adding Region Names and Additional Data

আপনি GeoChart-এ অতিরিক্ত ডেটা (যেমন: জনসংখ্যা, GDP, বা আয়) এবং অঞ্চল বা দেশগুলোর নামও প্রদর্শন করতে পারেন।

GeoChart Visualization Example with Additional Data

এখানে একটি GeoChart এর উদাহরণ দেওয়া হলো, যেখানে বিভিন্ন দেশের জনসংখ্যা, GDP, এবং আয় দেখানো হবে:

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Interactive GeoChart - Map Visualization';

  chartType = 'GeoChart'; // Chart Type (GeoChart)
  
  chartData = [
    ['Country', 'Population', 'GDP'],
    ['USA', 331883986, 21.43],
    ['India', 1380004385, 2.87],
    ['China', 1444216107, 14.34],
    ['Brazil', 213993437, 2.05],
    ['Russia', 145912025, 1.48]
  ]; // Chart Data (Country, Population, GDP)

  chartOptions = {
    colorAxis: { colors: ['#e6f7ff', '#3399ff'] },
    backgroundColor: '#f5f5f5',
    datalessRegionColor: '#ffffff',
    defaultColor: '#f5f5f5'
  }; // Chart Options
}

app.component.html:

<h1>{{ title }}</h1>

<!-- Google GeoChart with Population and GDP -->
<google-chart 
  [type]="chartType" 
  [data]="chartData" 
  [options]="chartOptions">
</google-chart>

GeoChart Customization for Different Regions

GeoChart API আপনাকে বিভিন্ন অঞ্চলের জন্য কাস্টম ডেটা এবং রঙ প্রদর্শন করার সুযোগ দেয়। আপনি যদি শুধুমাত্র কিছু নির্দিষ্ট দেশ বা অঞ্চল প্রদর্শন করতে চান, তবে region অপশন ব্যবহার করতে পারেন।

chartOptions = {
  region: 'NA', // North America (USA, Canada, Mexico)
  colorAxis: { colors: ['#f2f2f2', '#ff6666'] }
};

এখানে region: 'NA' ব্যবহার করে আমরা শুধুমাত্র North America প্রদর্শন করেছি।

সারাংশ

GeoChart Google Charts API তে একটি শক্তিশালী টুল যা গ্লোবাল বা অঞ্চলের ম্যাপ ভিজুয়ালাইজেশন করতে সহায়তা করে। এটি ডেটাকে ম্যাপের মাধ্যমে উপস্থাপন করতে সহজ এবং কার্যকরী। আপনি GeoChart এর মাধ্যমে রঙ, টাইটেল, আকার, এবং আরও অনেক কিছু কাস্টমাইজ করতে পারেন। API থেকে ডেটা ফেচ করে, GeoChart এর মাধ্যমে বিশ্বের বিভিন্ন দেশ বা অঞ্চলের মানচিত্রে ডেটা উপস্থাপন করতে পারবেন।